<template>
  <div class="analyze-container">
    <!-- 模式选择 -->
    <el-card class="mode-card">
      <el-form label-position="left" label-width="120px">
        <el-form-item label="分析模式">
          <el-select v-model="mode" placeholder="请选择分析模式" @change="handleModeChange">
            <el-option label="公共图库" value="public" />
            <el-option label="全空间" value="all" />
            <el-option label="特定空间" value="specific" />
          </el-select>
        </el-form-item>

        <el-form-item label="空间ID" v-if="mode === 'specific'">
          <el-input v-model="spaceId" placeholder="请输入空间ID" />
        </el-form-item>

        <el-button type="primary" @click="fetchData">查询</el-button>
      </el-form>
    </el-card>

    <!-- 图表区域 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <analyze-view
          ref="classifyChart"
          title="图片分类分布"
          :chart-data="classifyData"
          chart-type="pie"
          x-field="classifyName"
          y-field="count"
        />
      </el-col>

      <el-col :span="12">
        <analyze-view
          ref="sizeChart"
          title="图片大小分布"
          :chart-data="sizeData"
          chart-type="pie"
          x-field="sizeRange"
          y-field="count"
        />
      </el-col>

      <el-col :span="12">
        <analyze-view
          ref="tagChart"
          title="图片标签分布"
          :chart-data="tagData"
          chart-type="bar"
          x-field="tag"
          y-field="count"
        />
      </el-col>

      <el-col :span="12">
        <analyze-view
          ref="userChart"
          title="用户上传趋势"
          :chart-data="userData"
          chart-type="line"
          x-field="period"
          y-field="count"
        />
      </el-col>

      <el-col :span="24" v-if="mode === 'specific'">
        <el-card>
          <div class="chart-title">空间使用情况</div>
          <el-progress
            v-if="usageData.sizeUsageRatio"
            :text-inside="true"
            :stroke-width="20"
            :percentage="usageData.sizeUsageRatio * 100"
            status="success"
          >
            已使用 {{ formatFileSize(usageData.usedSize) }} / 总空间
            {{ formatFileSize(usageData.maxSize) }}
          </el-progress>
          <el-progress
            v-if="usageData.countUsageRatio"
            :text-inside="true"
            :stroke-width="20"
            :percentage="usageData.countUsageRatio * 100"
            status="warning"
            style="margin-top: 20px"
          >
            图片数量 {{ usageData.usedCount }} / {{ usageData.maxCount }}
          </el-progress>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import AnalyzeView from '@/components/AnalyzeView.vue'
import {
  getSpaceCategoryAnalyzeAPI,
  getSpaceSizeAnalyzeAPI,
  getSpaceTagAnalyzeAPI,
  getSpaceUsageAnalyzeAPI,
  getSpaceUserAnalyzeAPI,
} from '@/api/spaceAnalyze'
import formatFileSize from '@/utils/formatFileSize'

const mode = ref('public') // 默认为公共图库模式
const spaceId = ref(null)

const classifyData = ref([])
const sizeData = ref([])
const tagData = ref([])
const userData = ref([])
const usageData = ref({})

// 图表引用用于 resize 时重绘
const classifyChart = ref(null)
const sizeChart = ref(null)
const tagChart = ref(null)
const userChart = ref(null)

function getParams() {
  let params = {}
  if (mode.value === 'public') {
    params.queryPublic = true
    params.queryAll = false
    params.spaceId = null
  } else if (mode.value === 'all') {
    params.queryPublic = false
    params.queryAll = true
    params.spaceId = null
  } else if (mode.value === 'specific') {
    params.queryPublic = false
    params.queryAll = false
    params.spaceId = spaceId.value.trim()
  }
  params.timeDimension = 'day' // 示例时间维度
  return params
}

async function fetchData() {
  const params = getParams()

  // 分类分析
  const classifyRes = await getSpaceCategoryAnalyzeAPI(params)
  classifyData.value = classifyRes.data || []

  // 大小分析
  const sizeRes = await getSpaceSizeAnalyzeAPI(params)
  sizeData.value = sizeRes.data || []

  // 标签分析
  const tagRes = await getSpaceTagAnalyzeAPI(params)
  tagData.value = tagRes.data || []

  // 用户行为分析
  const userRes = await getSpaceUserAnalyzeAPI(params)
  userData.value = userRes.data || []

  // 空间使用情况
  const usageRes = await getSpaceUsageAnalyzeAPI(params)
  usageData.value = usageRes.data || {}
}

function handleModeChange() {
  if (mode.value !== 'specific') {
    spaceId.value = null
  }
}

onMounted(() => {
  fetchData()
})

onBeforeUnmount(() => {})
</script>

<style scoped>
.analyze-container {
  padding: 20px;
}
.mode-card {
  margin-bottom: 20px;
}
.chart-title {
  font-size: 18px;
  margin-bottom: 10px;
}
</style>
